<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.ok{
				color:green;
			}
			.error{
				color:red;
		</style>
		<script type="text/javascript">
			function checkName(){
					alert(checkName);
					var put = document.getElementById("name").value;
					var reg = /^\w{5,10}$/;
					var result = put.match(reg);
					var span = document.getElementById("nameMsg");
					if(result){
						span.className = "ok"; 
					}else{
						span.className = "error";
					}
			}
			function checkName2(){
				alert(checkName2);
				var put1 = document.getElementById("name2").value;
				var reg1 = /^\w{10,20}$/;
				var result1 = put1.match(reg1);
				var span1 = document.getElementById("nameMsg2");
				if(result1){
					span1.className = "ok";
				}else{
					span1.className = "error";
				}
			}
		</script>
	</head>
	<body>
		账号：<input type="text" onblur="checkName()" id="name"/>
		<span id="nameMsg">5-10位字母、数字、下划线</span><br />
		
		
		密码：<input type="text" onblur="checkName2()" id="name2"/>
		<span id="nameMsg2">10-20位字母、数字、下划线</span><br />
		<input type="button" value="登陆" />
	</body>
</html>
